<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css"  rel="stylesheet">
<link href="css/bootstrap-theme.css"  rel="stylesheet">

<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script> 
<script type="text/javascript" charset="utf-8" src="js/bootstrap.js"></script>
<script type="text/javascript" charset="utf-8" src="js/plugins.js"></script>
<script type="text/javascript" charset="utf-8" src="js/ip.js"></script>
<style>
	.kb{
			position:absolute;
			top:-70%;
		}
	@media screen and (max-width: 980px) {
		.kb{
			position:absolute;
			top:-70%;
		}
	 }

	/* Small devices (tablets, 768px and up) */
	@media screen and (max-width: 700px) {
		.kb{
			position:absolute;
			top:-50%;
		}
	 }
	
	/* Medium devices (desktops, 992px and up) */
	@media screen and (max-width: 480px) {
		.kb{
			position:absolute;
			top:-30%;
		}
	  }
	
	/* Large devices (large desktops, 1200px and up) */
	
</style>
</head>
<body>
	<div class="container" id="context">
    		<div class="row" style="height:100%">
            	 <div class="col-md-12" style="background-color:rgb(254,157,52);height:40%;" >
                 		<center style="height:100%">
                 		<img src="images/login/face.png" style="height:100%">
                        </center>
                   
           		 </div>
                  <div class="col-md-12" style="background-color:rgb(236,236,236);height:60%;">
                  		<div class="center-block" >
                       		 <br/>
                            <div class="input-group">
                              <span class="input-group-btn">
                                <button class="btn btn-default" type="button" >邮箱</button>
                              </span>
                              <input type="text" class="form-control" id="email">
                            </div><!-- /input-group -->
                            <br/>
                            
                            <div class="input-group">
                              <span class="input-group-btn">
                                <button class="btn btn-default" type="button" >密码</button>
                              </span>
                              <input type="password" class="form-control" id="password">
                            </div><!-- /input-group -->
                            <br/>
                     		<button type="button" class="btn btn-default btn-lg btn-block" id="submit" onclick="login()">登陆</button>
                              <br/>
                                <br/>
                            

                             <button type="button" class="btn btn-default btn-xs btn-block " onclick='href("reg.html")'>注册</button>
							 <button type="button" class="btn btn-default btn-xs btn-block " >不注册</button>
							
					
                        </div>
                    


           		 </div>
            </div>
    </div>
</body>
<script>
	var cheight=document.documentElement.clientHeight;
	var context=document.getElementById("context");
	context.style.height=cheight+"px";
	
	function href(url){
		window.location.href="./"+url;
		
	}
	function login(){
		var name=document.getElementById("name").value;
		var pass=document.getElementById("password").value;
		$.ajax({
			"url":IP.main+IP.user+"!login",
			"data":{"email":name,"password":pass},
			"type":"post",
			"success":function(json){
				console.log("login:"+json);
				if(json&&json.state!=false){
					window.localStorage.user=JSON.stringify(json);;
					window.location.href="./main.html";
				}else{
					alert("登陆失败，账号或密码错误！");
				}
			},
			"error":function(){
				alert("登陆失败，网络问题！");
			}
		})

	}
	
	
	/*if(window.localStorage){
		 alert('This browser supports localStorage');
	}else{
		 alert('This browser does NOT support localStorage');
	}
	if(window.sessionStorage){
		 alert('This browser supports sessionStorage');
	}else{
		 alert('This browser does NOT support sessionStorage');
	}*/
</script>
</html>